<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: transform 1s;
    }
    
    .box:hover {
        transform: rotate(180deg);
    }
    
    .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        animation: move 2s infinite;
    }
    
    @keyframes move {
        0% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(200px);
        }
        100% {
            transform: translateX(0);
        }
    }
</style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
</body>
</html>

<!-- 上述代码中，有两个div元素，一个是class为"box"的红色方块，另一个是class为"box2"的蓝色方块。

对于红色方块，当鼠标悬停在其上时，通过设置:hover伪类选择器和transform属性，实现了一个在鼠标悬停时旋转180度的过渡效果。
对于蓝色方块，通过设置animation属性和@keyframes规则，创建了一个移动的动画效果。在@keyframes规则中，定义了从0%到50%到100%的三个关键帧，分别对应元素的初始状态、中间状态和结束状态，通过transform的translateX属性实现了水平方向上的平移效果。设置infinite属性使动画无限循环播放。
这样，当你在浏览器中打开上述HTML示例时，你将看到一个在鼠标悬停时旋转的红色方块和一个不断水平移动的蓝色方块。 -->